import React, { Component } from 'react'
import './voteItem.scss'
import SelectItem from '../selectItem/selectItem'
import Vote,{Option} from '../../types/vote'
import moment from 'moment'

interface Iprops{
    item:Vote
}

class VoteItem extends Component<Iprops> {
    render() {
        //投票的状态
        let {title,con,items,isName,id,endTime,createUser,createTime,voteUsers} = this.props.item;
        //是否投票
        let username = localStorage.getItem('username') || '';
        let status = voteUsers.includes(username);
        //1.计算当前投票的总票数
        let total = voteUsers.length;
        return (
            <div className="v-wrap">
                <div className="v-top">
                    <h4 className="v-tit">{isName==='1'?'匿名':createUser}</h4>
                    <span className="gray">{moment(createTime).format('YYYY-MM-DD')}</span>
                </div>
                <h4 className="v-tit">{title}</h4>
                <div className="v-con">
                    <span>{con}</span>
                    <div>
                        {items && items.map((option:Option) => <SelectItem key={option.id} total={total} status={status} option={option}></SelectItem>)}
                    </div>
                    <div className="v-con-bottom">
                        <div className="gray">
                            <span>{total}个人参与</span>
                            <span>还有357天结束</span>
                        </div>
                        <div>
                            <i>{isName==='1'?'匿名':createUser}</i>创建
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default VoteItem
